import React, {Component} from 'react';
import {connect} from 'react-redux';
import Carousel from 'react-native-banner-carousel';
import {screenWidth} from '../utils/StylesUtils';
import * as homeActions from '../actions/homeActions';
import * as colors from '../utils/ColorUtils';
import abeStyles from "../utils/StylesUtils";
import ArticleItemView from '../ui/view/ArticleitemView';
import {
    Image, Text,
    View, FlatList,
    RefreshControl
} from 'react-native';

class HomePage extends Component {
    constructor(props) {
        super(props);
        //轮播高度
        let bannerH = screenWidth * 5 / 9;
        this.state = {bannerH: bannerH};
        this.renderPage = this.renderPage.bind(this);
        this._renderRefresh = this._renderRefresh.bind(this);
        this._onEndReached = this._onEndReached.bind(this);
    }

    componentWillMount() {
        this._renderRefresh();
    }

    renderPage(banner, index) {
        return (
            <View key={index}>
                <Image style={{width: screenWidth, height: this.state.bannerH}} source={{uri: banner.imagePath}}/>
            </View>
        );
    }

    _extraUniqueKey(item, index) {
        return "index" + index + item;
    }

    _onEndReached() {
        //正在加载且存在未加载
        if (!this.props.isEnd && !this.props.isLoading) {
            this.props.getArticles(this.props.page);
        }
    };

    _renderRefresh() {
        this.props.getArticles(0);
        this.props.getBanner();
    }

    render() {
        const {datas, banners, isRefreshing} = this.props;
        return (
            <View style={[abeStyles.matchParent, abeStyles.normalBg]}>
                <View style={[abeStyles.screenW, abeStyles.layoutHLC, abeStyles.gravityCenter, {
                    height: 50,
                    backgroundColor: colors.white
                }]}>
                    <Text style={{fontSize: 15, color: colors.colorTheme}}>首页</Text>
                </View>
                <FlatList
                    data={datas}
                    refreshControl={
                        <RefreshControl
                            refreshing={isRefreshing}
                            onRefresh={this._renderRefresh}
                            tintColor={colors.colorTheme}
                            title={isRefreshing ? '刷新中....' : '下拉刷新'}
                        />
                    }
                    ListHeaderComponent={() =>
                        <Carousel style={[abeStyles.screenW, {height: this.state.bannerH}]}
                                  autoplay
                                  autoplayTimeout={3000}
                                  loop
                                  index={0}
                                  pageSize={screenWidth}
                        >
                            {banners.map((banner, index) => this.renderPage(banner, index))}
                        </Carousel>}
                    renderItem={(item, index) => <ArticleItemView item={item}/>}
                    style={[abeStyles.normalBg, {marginTop: 1, paddingBottom: 10}]}
                    keyExtractor={this._extraUniqueKey}
                    onEndReachedThreshold={1}
                    onEndReached={this._onEndReached}
                />
            </View>
        );
    }
}

const mapState = state => ({
    page: state.home.page,
    banners: state.home.banners,
    datas: state.home.datas,
    isRefreshing: state.home.isRefreshing,
    isEnd: state.home.isEnd
});

const dispatchAction = dispatch => ({
    getBanner: () => dispatch(homeActions.getBanner()),
    getArticles: (page) => dispatch(homeActions.getArticles(page))
});

export default connect(mapState, dispatchAction)(HomePage);